<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
    <div class="data-form-wrap">
      <el-form ref="dataForm" class="dataForm" :model="forms" :rules="rules" label-width="120px">
        <el-form-item label="所属机构" prop="orgId">
          <el-select v-model="forms.orgId" placeholder="请选择所属机构" disabled style="width: 100%">
            <el-option v-for="item in orgTreeData" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model.trim="forms.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input v-model.trim="forms.userName" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model.trim="forms.idCard" placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model.trim="forms.mobile" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="类别" prop="category">
          <el-select v-model="forms.category" placeholder="请选择类别" style="width: 100%">
            <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="forms.state" placeholder="请选择状态" style="width: 100%">
            <el-option
              v-for="item in stateListData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序 " prop="sortNum">
          <el-input type="number" @input="validateInput" v-model="forms.sortNum" />
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitHandle">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { addOrUpd } from '@/api/userManage'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'Edit',
  components: {
    Treeselect
  },
  props: {
    orgObj: {
      type: Object,
      require: true,
      default: () => {}
    }
  },
  data () {
    return {
      categoryList: [
        {
          id: 1,
          name: '内部'
        },
        {
          id: 2,
          name: '外部'
        }
      ],
      orgTreeData: [],
      stateListData: [
        {
          id: 1,
          name: '正常'
        },
        {
          id: 2,
          name: '锁定'
        },
        {
          id: 3,
          name: '禁用'
        }
      ],
      title: '',
      dialogVisible: false,
      forms: {},
      rules: {
        category: [{ required: true, message: '类别不能为空', trigger: 'change' }],
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' },
          { min: 2, message: '不能小于2个字符', trigger: 'blur' },
          { max: 10, message: '不能超过10个字符', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 2, message: '不能小于2个字符', trigger: 'blur' },
          { max: 30, message: '不能超过30个字符', trigger: 'blur' }
        ],
        idCard: [
          { required: false, pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确身份证号', trigger: 'blur' }

        ],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { max: 11, message: '不能超过11个字符', trigger: 'blur' },
          { pattern: /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/, message: '请输入正确手机号码', trigger: 'blur' }

        ],
        state: [
          { required: true, message: '状态不能为空', trigger: 'change' }
        ],
        orgId: [
          { required: true, message: '组织机构不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    validateInput () {
      this.forms.sortNum = this.forms.sortNum.replace(/[^\d]/g, '') // 使用正则表达式去除非数字字符
      if (this.forms.sortNum === '' || this.forms.sortNum === '0') {
        this.forms.sortNum = 1 // 默认设置为1或任何你认为合适的默认正整数
      } else if (this.forms.sortNum > 99999) {
        this.forms.sortNum = 99999
      }
    },
    normalizer (node) {
      return {
        id: node.id,
        label: node.name,
        children: node.sub
      }
    },
    async open (str, row) {
      this.dialogVisible = true
      this.orgTreeData = [
        {
          name: this.orgObj.name,
          id: this.orgObj.id
        }
      ]
      if (str === 'add') {
        this.title = '新增用户'
        this.forms = {
          orgId: this.orgObj.id,
          category: '',
          name: '',
          userName: '',
          mobile: '',
          idCard: '',
          state: 1,
          sortNum: 1
        }
      } else {
        this.title = '修改用户'
        this.forms = {
          orgId: this.orgObj.id,
          category: row.category,
          name: row.name,
          id: row.id,
          userName: row.userName,
          mobile: row.mobile,
          idCard: row.idCard,
          state: row.state,
          sortNum: row.sortNum
        }
        console.log(row, '详情数据')
      }
    },
    async submitHandle () {
      this.$refs.dataForm.validate(async (valid) => {
        if (valid) {
          this.forms.sortNum = Number(this.forms.sortNum)
          const res = await addOrUpd(this.forms)
          if (res.code === 'success') {
            this.$message.success('操作成功')
            this.dialogVisible = false
            this.$emit('getTableList')
            this.$refs.dataForm.resetFields()
          } else {
            this.$message.error(res.msg)
          }
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.tree-border {
  margin-top: 5px;
  border: 1px solid #e5e6e7;
  background: #fff none;
  border-radius: 4px;
  height: 300px;
  overflow-y: auto;
}
</style>
